<template>
    <div class="boxContentCss">
        <el-form ref="formRef" :model="form" label-position="right" label-width="auto">
            <EdCreateCard title="基本信息">
                <template #back>
                    <el-button class="ed-button ed_black-bottom" @click="batchAdd()" size="mini" v-has="'charge:task:batchAdd'"><svg-icon icon-class="add-svg"/>批量添加</el-button>
                    <div class="createBack" @click="$utilsSet.goBack($router)"><svg-icon icon-class="back" /> 返回</div>
                </template>
                <div class="zh_flex">
                    <el-form-item label="选择房间" class="width-50" prop="roomIds" :rules="validate.validates({required:true,msg:'房间不能为空'})">
                        <RoomInput class="mr-2" :room.sync="form.room" @update:room="onRoomInput"/>
                    </el-form-item>
                    <el-form-item label="选择客户" class="width-50" prop="ownerId" :rules="validate.validates({required:true,msg:'客户不能为空'})">
                        <EdSelect v-model="form.ownerId" :selectParams="data.selectParamsPerson"></EdSelect>
                    </el-form-item>
                    <el-form-item label="收费类型" class="width-50" prop="payCause" :rules="validate.validates({required:true,msg:'收费类型不能为空'})">
                        <EdSelect v-model="form.payCause" :selectParams="data.selectParamsPayCause"></EdSelect>
                    </el-form-item>
                    <el-form-item label="收费金额" class="width-50" prop="paymentAmount" :rules="validate.validates({required:true,msg:'缴费金额不能为空', type: 'money'})">
                        <el-input class="flex-input" placeholder="请输入收费金额" v-model="form.paymentAmount"></el-input>
                    </el-form-item>
                    <el-form-item label="备注信息" class="width-50" prop="annotation">
                        <el-input class="flex-input" placeholder="请输入备注信息" v-model="form.annotation" maxlength="100"></el-input>
                    </el-form-item>
                </div>
                <el-form-item class="form_btns">
                    <el-button class="ed-button ed_black-bottom" @click="onSubmit()" :loading="data.disabled">发送</el-button>
                    <el-button class="ed-button ed_white_bottom" @click="$utilsSet.goBack($router)">取消</el-button>
                </el-form-item>
            </EdCreateCard>
        </el-form>
    </div>
</template>

<script setup>
    import EdCreateCard from 'src/components/EdCreateCard.vue'
    import EdSelect from 'src/components/EdSelect.vue'
    import { onDeactivated, reactive, ref } from 'vue'
    import * as api from './api'
    import router from 'src/router'
    import message from 'src/utils/once-message'
    import * as validate from "src/utils/validate"
    import RoomInput from 'src/components/HousePicker/RoomInput.vue'
    const form = reactive({
        room: null,
        roomIds: [],
        ownerId: '',
        payCause: '',
        paymentAmount: '',
        annotation: '',
    })
    const data = reactive({
        pickerParams:{ valueFormat:"yyyy-MM-dd" },
        disabled:false,
        selectParamsAddress:{
            options: [{
                value: '选项1',
                label: '楼栋1'
            }, {
                value: '选项2',
                label: '楼栋2'
            }, {
                value: '选项3',
                label: '楼栋3'
            }],
            placeholder: "请选择分期/楼栋/单元"
        },
        selectParamsPerson:{
            options: [],
            placeholder:"请选择客户",
            props: {value: 'id', label: 'residentName'}
        },
        selectParamsPayCause:{
            options: [{
                value: '0',
                label: '物业费'
            }, {
                value: '1',
                label: '车位费'
            }, {
                value: '2',
                label: '其他'
            }],
            placeholder:"请选择收费类型"
        }
    })
    // onActivated(()=>{ console.log('router--->', router, router.currentRoute)})
    const edLazyCascader = ref()
    const formRef = ref()
    onDeactivated(()=>{
        Object.assign(form, {
            room: null,
            roomIds: [],
            ownerId: '',
            payCause: '',
            paymentAmount: '',
            annotation: '',
        })
        data.disabled = false
        formRef.value.resetFields()
    })
    function onRoomInput(data) {
        if (data) {
            form.roomIds = [data];
            form.ownerId = '';
            getresidentsByRoomId(data)
        }
    }
    // 通过roomId查住户
    function getresidentsByRoomId(roomId){
        api.getresidentsByRoomId(roomId).then(res => {
            if(res.success == true) {
                data.selectParamsPerson.options = res.data;
            }
        })
    }
    function batchAdd(){
        router.push({
            path: '/charge/task-batchadd'
        })
    }
    function onSubmit(){
        formRef.value.validate((valid) => {
            if(valid){
                data.disabled = true;
                let query = form.copy();
                data.selectParamsPerson.options.forEach((v, i)=>{
                    if(query['ownerId'] == v['id']){
                        query['ownerPhone'] = v['phone']
                        query['ownerName'] = v['residentName']
                        query['useId'] = v['useId']
                    }
                })
                api.payTaskAdd(query).then(response => {
                    if(response.code == 20000) {
                        data.disabled = false;
                        message.success({
                            message: '保存成功',
                            center: true,
                            duration: 2000,
                        });
                        window.setTimeout(() => {
                            router.back()
                        }, 600)
                    }else {
                        data.disabled = false
                    }
                }).catch(()=>{
                    data.disabled = false
                })
            }
        })
    }
</script>

<style scoped lang="scss">
    :deep .el-form-item{
        .el-form-item__content{
            .el-input{
                width: 60% !important;
            }
            .el-select{
                width: 60% !important;
                .el-input{
                    width: 100% !important;
                }
            }
            .el-cascader{
                width: 100% !important;
            }
        }
    }
    .img_center{
        display: flex;
        align-items: center;
    }
    .form_btns{
        margin-left: 47px;
    }
    .createBack{
        line-height: 40px;
        margin-left: 10px;
    }
</style>